import React from 'react';

import { Form, Input, Select } from 'antd';
const { Item } = Form;
const { Option } = Select;

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};

export default function AddAndUpdate(props) {

    const { form, roles } = props;

    const user = props.user || {};

    return (
        <Form
            {...formItemLayout}
            ref={form}
        >
            <Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '用户名不能为空！' }]}
            >
                <Input placeholder="请输入用户名" autoComplete="off"></Input>
            </Item>
            {
                !user.password ? (
                    <Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '密码不能为空！' }]}
                    >
                        <Input.Password placeholder="请输入密码"></Input.Password>
                    </Item>
                ) : ''
            }
            <Item
                label="手机号"
                name="phone"
            >
                <Input type="number" placeholder="请输入手机号" autoComplete="off"></Input>
            </Item>
            <Item
                label="邮箱"
                name="email"
            >
                <Input placeholder="请输入邮箱" autoComplete="off"></Input>
            </Item>
            <Item
                label="角色"
                name="role_id"
            >
                <Select placeholder="请选择角色类别">
                    {
                        roles.map(role => {
                            return (
                                <Option key={role._id}>{role.name}</Option>
                            )
                        })
                    }
                </Select>
            </Item>
        </Form>
    )
}
